:root {
    --default-bg-color: greenyellow;
    --default-border-color: green;
    --default-text-color: green;
    --dark-bg-color: black;
    --dark-border-color: gray;
    --dark-text-color: whitesmoke;
    --light-bg-color: whitesmoke;
    --light-border-color: gray;
    --light-text-color: black;
    --pink-bg-color: pink;
    --pink-border-color: rgb(255, 100, 100);
    --pink-text-color: rgb(255, 50, 50);
    --disable-bg-color: rgb(218, 218, 218);
    --disable-border-color: rgb(190, 190, 190);
    --disable-text-color: rgb(190, 190, 190);
    --chess-border-color: gray;
    --chess-black-color: black;
    --chess-white-color: white;
}

html,
body {
    font-size: 14px;
    font-family: sans-serif;
    box-sizing: border-box;
    margin: 0;
    height: 100%;
    background: var(--default-bg-color) url('../static/bg-01.jpg') repeat center fixed;

}

input {
    border: none;
}

input:focus {
    outline: none;
}

ul,
ol {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.container {
    width: 100%;
    margin: 0 auto;
}

*[hidden],
.hidden {
    display: none !important;
}

/* 滚动条 */

/*修改滚动条样式*/
/* 滚动条粗细 */
body::-webkit-scrollbar,
ul::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* 滑道 */
body::-webkit-scrollbar-track,
ul::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 6px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

/* 滑块 */
body::-webkit-scrollbar-thumb,
ul::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 6px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

body::-webkit-scrollbar-thumb:hover,
ul::-webkit-scrollbar-thumb:hover {
    background: #333;
}

body::-webkit-scrollbar-corner,
ul::-webkit-scrollbar-corner {
    background: #666;
}

/* 自定义默认按钮 */
.btn-default {
    background: var(--default-bg-color);
    color: var(--default-text-color);
    cursor: pointer;
}

.btn-dark {
    background: var(--dark-bg-color);
    color: var(--dark-text-color);
    cursor: pointer;
}

.btn-light {
    color: gray;
    background: whitesmoke;
    cursor: pointer;
}

/* 底部功能区按钮前置图标 */
.icon-logo::before,
.icon-create::before,
.icon-quick::before,
.icon-quit::before,
.icon-ready::before,
.icon-defeat::before,
.icon-peace::before,
.icon-out::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    padding-right: 2px;
}

.icon-logo::before {
    background: url('../static/spring-icon.png') no-repeat -49px -49px/400%
}

.icon-create::before {
    background: url('../static/spring-icon.png') no-repeat 0px 2px/350%
}

.icon-quick::before {
    background: url('../static/spring-icon.png') no-repeat -18px 2px/350%
}

.icon-quit::before {
    background: url('../static/spring-icon.png') no-repeat -36px 2px/350%
}

.icon-ready::before {
    background: url('../static/spring-icon.png') no-repeat 0px -16px/350%
}

.icon-defeat::before {
    background: url('../static/spring-icon.png') no-repeat -37px -16px/350%
}

.icon-peace::before {
    background: url('../static/spring-icon.png') no-repeat -19px -16px/350%
}

.icon-out::before {
    background: url('../static/spring-icon.png') no-repeat 0 -34px/350%
}

/* 提示框：tips-box tips-text tips-popover */
#tips-box {
    text-align: center;
    cursor: default;
}

.tips-text {
    display: inline-block;
    border: 1px solid var(--default-border-color);
    border-radius: 3px;
    color: var(--default-text-color);
    background: var(--default-bg-color);
    margin: 0 auto;
    padding: 0.5rem 2rem;
}

/* 首屏登录 */
#login {
    /* display: none; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    position: fixed;
    z-index: 99;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* background: var(--default-bg-color) url('../static/bg-01.jpg') repeat center; */
}

#login>* {
    width: 60%;
    text-align: center;
    border: none;
    border-radius: 0.5rem;
    padding: 1rem 10%;
    margin: 0 auto 1rem;
}

#login-logo {
    width: 20%;
}

/* 顶部标题 */
.header-title {
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.5rem;
    font-family: sans-serif;
    color: green;
    font-weight: 900;
    opacity: 0.4;
}

/* 底部 */
#bottom-box {
    position: fixed;
    z-index: 90;
    bottom: 4px;
    left: 0;
    right: 0;
    background: rgba(128, 128, 128, 0.9);
    overflow: hidden;
}

#chat-zoom {
    border: 2px solid gray;
}

#chat-list {
    height: 12.2rem;
    padding-left: 1rem;
    overflow-y: scroll;
}

#chat-list.simple {
    height: 2.8rem;
    overflow: hidden;
}

#chat-btn-group {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    color: #444444;
    cursor: pointer;
}

#chat-btn-group span:hover {
    color: #333333;
    background: grey;
}

#chat-control {
    display: flex;
}

#chat-control>* {
    flex: 1 1;
}

#chat-control input[type='text'] {
    flex-basis: 70%;
}

#chat-control span {
    flex-basis: 15%;
    text-align: center;
    padding: 0.5rem 0;

}


#opts-zoom {
    display: flex;
    height: 6rem;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}

#opts-zoom #opts-btn-group {
    flex-basis: 70%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#opts-btn-group>* {
    flex: 0 0 58px;
    padding: 2px 4px;
    margin: 0 2px;
    border-top-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

/* 房间列表 */
#rooms {
    position: absolute;
    z-index: 80;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    cursor: default;
    margin-bottom: 160px;
}

/* 房间卡片 */
#rooms .room {

    width: 80%;
    height: 150px;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;

    position: relative;
    text-align: center;
    padding: 0.5rem;
    border: 2px solid var(--default-border-color);
    border-radius: 0.5rem;
    margin: 0.5rem;
    color: var(--default-text-color);
    overflow: hidden;
}

#rooms .room.start {
    border-color: var(--disable-border-color);
    color: var(--disable-text-color);
}

#rooms .room.start>div::after {
    background: var(--disable-bg-color, gray);
}

#rooms .room.grey {
    opacity: 0.6;
    color: grey;
    border-color: transparent;
}

#rooms .room.room-create {
    font-size: 4rem;
    color: var(--default-text-color);
    cursor: pointer;
    transition: color 0.2s;
}

#rooms .room span {
    flex: 0 0 50%;
}

#rooms .room>div {
    position: absolute;
    right: 0.5rem;
    bottom: 0.25rem;
    cursor: pointer;
    color: var(--default-bg-color);
}

#rooms .room>div::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: -0.25rem;
    bottom: -1rem;
    left: -0.75rem;
    right: -1rem;
    padding: 0.5rem 1rem;
    border-top-left-radius: 0.5rem;
    background: var(--default-border-color, green);
    transform: skewX(-20deg);
}

/* 游戏区域 */
#chess-box {
    text-align: center;
}

#chess-info,
#user-info {
    display: flex;
    text-align: center;
    padding: 1rem 0;
}
#chess-info{
    /* background: var(--dark-bg-color); */
}

#user-info {
    font-size: 2rem;
}

#user-info div,
#chess-info div {
    flex: 1 1;
}

.icon-chess-black::before {
    content: '';
    box-sizing: border-box;
    display: inline-block;
    border: 2px solid var(--chess-border-color);
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    background: var(--chess-black-color);
}

.icon-chess-white::before {
    content: '';
    box-sizing: border-box;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    text-align: center;
    border: 2px solid var(--chess-border-color);
    border-radius: 50%;
    background: var(--chess-white-color);
}

.icon-chess-empty::before {
    content: '虚位以待';
    box-sizing: border-box;
    font-size: 1rem;
    color: var(--chess-border-color);
    opacity: 0.6;
}

.icon-vs::before {
    content: 'vs';
    color: var(--default-text-color);
    font-weight: bolder;
}

/* 响应 */
@media screen and (min-width:500px) {
    .container {
        width: 80%;
        margin: 0 auto;
    }

    /* 主页：底部 */
    #bottom-box {
        left: 10%;
        right: 10%;
    }

    /* 房间列表 */
    #rooms {
        left: 10%;
        right: 10%;
    }
}

@media screen and (min-width:800px) {
    .container {
        width: 60%;
        margin: 0 auto;
    }

    /* 主页：底部 */
    #bottom-box {
        left: 20%;
        right: 20%;
    }

    /* 房间列表 */
    #rooms {
        left: 20%;
        right: 20%;
    }
}

@media screen and (min-width:1200px) {
    .container {
        width: 50%;
        margin: 0 auto;
    }

    /* 主页：底部 */
    #bottom-box {
        left: 25%;
        right: 25%;
    }

    /* 房间列表 */
    #rooms {
        left: 25%;
        right: 25%;
    }
}